<template>
  <div>
    <div class="music_box" v-for="(item, index) in musics" :key="index.id">
      <div class="index" @click="playMusic(index)">{{ index + 1 }}</div>
      <div class="text van-ellipsis" @click="playMusic(index)">
        <p class="van-ellipsis">{{ item.name }}</p>
        <p class="van-ellipsis">
          <span style="color:red" class="tagColor" v-if="item.fee == 1 || item.fee == 4"
            >版权
          </span>
          <span class="tagColor" v-else>SQ </span>
          <span>{{ item.ar }}</span>
          -
          <span>{{ item.al }}</span>
        </p>
      </div>
      <div class="slice">
        <VueMusicMenu :id="item.id" />
      </div>
    </div>
  </div>
</template>

<script>
import VueMusicMenu from "@/components/common/menu.vue";
export default {
  name: "MusicSingle",
  props: ["songs"],
  components: {
    VueMusicMenu,
  },
  data() {
    return {};
  },

  mounted() {},
  computed: {
    musics() {
      const musics = this.songs.map((item) => ({
        id: item.id,
        name: item.name,
        picUrl: item.al.picUrl,
        al: item.al.name,
        alId: item.al.id,
        ar: item.ar.map((arItem) => arItem.name).join("/"),
        arId: item.ar[0].id,
        arList: item.ar.map((items) => ({
          arname: items.name,
          arid: items.id,
        })),
        fee: item.fee,
      }));
      return musics;
    },
  },
  methods: {
    playMusic(index) {
      this.$store.commit({
        type: "SET_PLAY_MUSIC",
        index: index,
        list: this.musics,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.music_box {
  display: flex;
  margin: 5px 0px;
  background-color: #fafafa;
  .index {
    width: 30px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #666;
  }
  .text {
    flex: 1;
    display: flex;
    flex-direction: column;
    p {
      height: 25px;
      line-height: 25px;
      text-align: left;
      padding-left: 5px;
      font-size: 16px;
     
    }
    p:nth-child(2) {
      color: #a0a0a0;
      font-size: 12px;
      .tagColor {
        color:#11bf72;
      }
    }
  }
  .slice {
    width: 3.125rem;
    height: 50px;
  }
}
</style>